<template>
	<view>
		<view class="game_indexs" :style="{'height':height}" v-if="paragraphs">
			<!-- <view class="yinyue">
				 <audio src="https://www.leedong.top/img/111.mp3" style="overflow: hidden;" controls="true" autoplay="true" loop="true"></audio>
				<img src="../../../static/yinyue.png" alt="">
			</view> -->
			<view class="poerty_name">
				<p class="shiming">{{paragraphs.title}}</p>
				<p class="tangdai">{{paragraphs.author}} 【唐代】</p>
			</view>
			<view class="start">
				<view v-for="(paragraph, index) in timu" :key="index" class="para">
					<span v-html="highlightWord(paragraph, '✮')"></span>
				</view>
			</view>
			<view class="jieguo">
				<view class="zq" v-if="zq">
					<img src="../../../static/zq.png" alt="" />
					<span>正确</span>
				</view>
				<view class="cw" v-if="cw">
					<img src="../../../static/cw.png" alt="" />
					<span>错误</span>
				</view>
				<span v-if="cw" style="color: #fd3258; font-size: 35rpx;" @click="ckda">查看答案</span>
			</view>
			<div class="tian">
				<div class="character-grid">

					<div class="grid-line"></div>
					<div class="grid-cell" @click="text1(replacedChars[0],0)"
						:style="{color:index1==1?'#751313':'#b79292'}">{{replacedChars[0]}}</div>
				</div>
				<div class="character-grid">

					<div class="grid-line"></div>
					<div class="grid-cell" @click="text1(replacedChars[1],1)"
						:style="{color:index2==1?'#751313':'#b79292'}">{{replacedChars[1]}}</div>
				</div>
				<div class="character-grid">

					<div class="grid-line"></div>
					<div class="grid-cell" @click="text1(replacedChars[2],2)"
						:style="{color:index3==1?'#751313':'#b79292'}">{{replacedChars[2]}}</div>
				</div>
				<div class="character-grid">

					<div class="grid-line"></div>
					<div class="grid-cell" @click="text1(replacedChars[3],3)"
						:style="{color:index4==1?'#751313':'#b79292'}">{{replacedChars[3]}}</div>
				</div>
			</div>
			</div>

			<view class="next" @click="next">
				<span>下一题</span>
			</view>
		</view>
		<view class="custom-modal" v-if="visible">
			<!-- 模态框的内容 -->

			<view class="content">
				<img src="../../../static/x.png" alt="" @click="ckda" />
				<view class="poerty_name">
					<p class="shiming">{{paragraphs.title}}</p>
					<p class="tangdai">{{paragraphs.author}} 【唐代】</p>
				</view>
				<view class="shi" v-for="(item,index) in paragraphs.paragraphs">
					<p>{{item}}</p>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: '1000px',
				list: [],
				zq: false,
				cw: false,
				timu: [],
				timushow: "",
				replacedChars: [],
				splitChars: [],
				splitChars1: [],
				visible: false,
				random: 0,
				paragraphs: null,
				index1: 1,
				index2: 1,
				index3: 1,
				index4: 1,
				results: [],
				biduiresults: []

			}
		},

		onLoad() {
			let self = this
			uni.getSystemInfo({
				success: function(info) {
					self.height = info.windowHeight + 'px'
				}
			});
			this.gamesjiandanList()

		},
		onShareAppMessage(res) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: "一起来填诗词吧",
				imageUrl: 'https://www.leedong.top/img/11556.png',

			}

		},
		//2.分享到朋友圈
		onShareTimeline() {
			return {
				title: "一起来填诗词吧",
				imageUrl: 'https://www.leedong.top/img/11556.png',


			}
		},
		methods: {
			highlightWord(paragraph, targetWord) {
				// 使用正则表达式查找目标字，并用 <span> 标签包裹起来  
				// 这里假设目标字不是 HTML 标签的一部分，且不考虑 HTML 实体编码  
				const regex = new RegExp(targetWord, 'g');
				return paragraph.replace(regex, `<span style="color: red;">${targetWord}</span>`);
			},
			ckda() {
				this.visible = !this.visible
			},
			text1(v, index) {
				let array = this.splitChars;
				console.log(this.results.includes(v))

				if (this.results.includes(v)) {
					return false
				}
				this.results.push(v);

				if (array.length == 4) {
					this.timu[0] = this.timu[0].toString().replace('✮', `<span style="color: red;">${v}</span>`)
					console.log(this.timu)
				}
				if (array.length == 3) {
					this.timu[1] = this.timu[1].toString().replace('✮', `<span style="color: red;">${v}</span>`)
					console.log(this.timu)
				}
				if (array.length == 2) {
					this.timu[2] = this.timu[2].toString().replace('✮', `<span style="color: red;">${v}</span>`)
					console.log(this.timu)
				}
				if (array.length == 1) {
					this.timu[3] = this.timu[3].toString().replace('✮', `<span style="color: red;">${v}</span>`)
					let flag = this.areSentencesEqual()
					if (flag) {
						this.zq = true;
					} else {
						this.cw = true;
					}
				}
				if (array.length == 0) {
					return
				}
				this.splitChars = array.filter(item => item !== v);
				if (index == 0) {
					this.index1 = "";
				}
				if (index == 1) {
					this.index2 = "";
				}
				if (index == 2) {
					this.index3 = "";
				}
				if (index == 3) {
					this.index4 = "";
				}
			},
			areSentencesEqual() {

				return this.results[0] == this.biduiresults[0] && this.results[1] == this.biduiresults[1] && this.results[
					2] == this.biduiresults[2] && this.results[3] == this.biduiresults[3]
			},
			getRandomInt(min, max) {
				min = Math.ceil(min);
				max = Math.floor(max);
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			poemParts(str) {
				str = str.split(/，|。|！|？/);
				return str.filter(part => part.trim() !== '');
			},

			shuffleArray(array) {
				for (let i = array.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[array[i], array[j]] = [array[j], array[i]];
				}
				return array;
			},
			replaceParts(poemParts) {
				this.replacedChars = []
				this.splitChars = []
				this.biduiresults = []
				let replacedParts = poemParts.map((part, index) => {

					let random = this.getRandomInt(1, part.length)

					const originalChar = part[random - 1]; // 获取原字符串中第三个字符  
					this.replacedChars.push(originalChar); // 将被替换的字符添加到数组中
					this.splitChars.push(originalChar)
					this.biduiresults.push(originalChar)
					this.replacedChars = this.shuffleArray(this.replacedChars)
					return part.slice(0, random - 1) + '✮' + part.slice(random); // 替换第三个字符为下划线  

				});
				return replacedParts
			},
			gamesjiandanList() {
				this.$api.gamesjiandan({}).then(res => {
					res.rows.forEach((v) => {
						v.paragraphs = v.paragraphs.replace(/,/g, '')
						v.paragraphs = this.poemParts(v.paragraphs);
					})
					this.list = res.rows.filter(b => b.paragraphs.length < 5)
					if (this.list) {
						this.setStr()
					}



				})
			},
			next() {
				this.cw = false;
				this.zq = false;
				this.index1 = "1";
				this.index2 = "1";
				this.index3 = "1";
				this.index4 = "1";
				this.results = []
				this.setStr()
			},
			setStr() {

				let random = this.getRandomInt(1, this.list.length);
				this.timu = this.replaceParts(this.list[random].paragraphs)
				this.paragraphs = this.list[random];


			}
		}
	}
</script>

<style lang="scss">
	.custom-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.custom-modal .content {
		width: 55%;
		height: 250px;
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		position: relative;

		img {
			position: absolute;
			right: 0;
			top: 1px;
			width: 32px;
			height: 32px;
		}

		.poerty_name {
			text-align: center;

			.shiming {
				font-weight: 800;
				font-size: 35rpx;
			}

			.tangdai {
				font-size: 28rpx;
			}

		}

		.shi {
			text-align: center;

			font-size: 33rpx;
			line-height: 45px;

		}
	}

	.game_indexs {
		.yinyue {
			position: fixed;
			top: 10px;
			left: 20px;

			img {
				width: 40px;
				height: 40px;
			}
		}

		.poerty_name {
			width: 100%;
			margin: auto;
			text-align: center;

			.shiming {
				font-weight: 800;
				font-size: 50rpx;
			}

			.tangdai {
				font-size: 35rpx;
				margin-top: 10px;
			}

		}

		width: 100%;
		position: relative;

		background-repeat: repeat;
		opacity: 0.8;
		background-image: url(https://www.leedong.top/img/666.jpg);

		.start {
			width: 85%;
			margin: auto;
			height: 310px;

			// background-size: 100% 100%;
			text-align: center;


			.para {
				margin-top: 30px;

				span {
					font-size: 50rpx;
					font-weight: 800;
					font-family: 'fangsong';
					letter-spacing: 5px;
					color: #000;
				}
			}
		}

		.tian {
			display: flex;
			justify-content: space-around;
			margin-top: 75px;
		}

		.character-grid {

			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;


			justify-content: space-between;
		}

		.grid-line {

			border-bottom: 1px dashed #000;
			/* 使用dashed表示虚线 */
		}

		.grid-cell {
			width: 48px;
			height: 48px;
			line-height: 48px;
			text-align: center;
			border: 2px solid #ad3939;
			position: relative;
			border-radius: 10px;
			font-size: 60rpx;
			color: #751313;

		}

		/* 如果需要模拟田字格内部的虚线线条 */
		.grid-cell::before,
		.grid-cell::after {
			content: '';
			position: absolute;
			border-style: dashed;
			/* 使用dashed表示虚线 */
		}

		.grid-cell::before {
			width: 100%;
			height: 1px;
			top: 50%;
			left: 0;
			border-width: 0;
			border-bottom-width: 1px;
			/* 虚线下边框宽度 */
			border-color: red;
			/* 虚线颜色 */
		}

		.grid-cell::after {
			width: 1px;
			height: 100%;
			top: 0;
			left: 50%;
			border-width: 0;
			border-right-width: 1px;
			/* 虚线右边框宽度 */
			border-color: red;
			/* 虚线颜色 */
		}

		.jieguo {
			text-align: center;

			.zq {
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 128px;
					height: 128px;

				}

				span {
					font-size: 35rpx;
				}

			}

			.cw {
				justify-content: center;
				display: flex;
				align-items: center;

				img {
					width: 70px;
					height: 70px;

				}

				span {
					font-size: 35rpx;
					padding-left: 35px;
				}
			}
		}

		.next {
			width: 30%;

			margin: auto;
			border-radius: 10px;
			margin-top: 30px;
			border: 3px solid firebrick;
			text-align: center;
			height: 30px;
			line-height: 30px;

			span {
				font-size: 35rpx;
			}
		}
	}
</style>